<template>
  <d2-container>
    <template slot="header">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="电表编号">
          <el-input v-model="searchForm.meterNumber" placeholder="请输入电表编号"></el-input>
        </el-form-item>
        <el-form-item label="房间号">
          <el-input v-model="searchForm.roomNumber" placeholder="请输入房间号"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-select v-model="searchForm.status" placeholder="请选择状态">
            <el-option label="全部" value=""></el-option>
            <el-option label="正常" value="normal"></el-option>
            <el-option label="故障" value="fault"></el-option>
            <el-option label="停用" value="disabled"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
          <el-button type="success" @click="handleAdd">新增电表</el-button>
        </el-form-item>
      </el-form>
    </template>
    
    <el-table
      :data="tableData"
      v-loading="loading"
      style="width: 100%">
      <el-table-column
        prop="meterNumber"
        label="电表编号"
        width="150">
      </el-table-column>
      <el-table-column
        prop="roomNumber"
        label="房间号"
        width="100">
      </el-table-column>
      <el-table-column
        prop="currentReading"
        label="当前读数"
        width="120">
        <template slot-scope="scope">
          {{ scope.row.currentReading }} kWh
        </template>
      </el-table-column>
      <el-table-column
        prop="lastReading"
        label="上次读数"
        width="120">
        <template slot-scope="scope">
          {{ scope.row.lastReading }} kWh
        </template>
      </el-table-column>
      <el-table-column
        prop="usage"
        label="用电量"
        width="100">
        <template slot-scope="scope">
          {{ scope.row.usage }} kWh
        </template>
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        width="100">
        <template slot-scope="scope">
          <el-tag :type="getStatusType(scope.row.status)">
            {{ getStatusText(scope.row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="installDate"
        label="安装日期"
        width="120">
      </el-table-column>
      <el-table-column
        label="操作"
        width="200">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="primary" @click="handleRead(scope.row)">抄表</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    
    <template slot="footer">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.currentPage"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pagination.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total">
      </el-pagination>
    </template>
  </d2-container>
</template>

<script>
import faker from 'faker'

export default {
  name: 'DeviceElectric',
  data () {
    return {
      loading: false,
      searchForm: {
        meterNumber: '',
        roomNumber: '',
        status: ''
      },
      tableData: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.loading = true
      // 模拟数据
      const data = {
        totalCount: 80,
        pageSize: 10,
        totalPage: 8,
        currPage: this.pagination.currentPage,
        list: Array.from({ length: 10 }, (_, index) => {
          const lastReading = faker.random.number({ min: 1000, max: 5000 })
          const currentReading = lastReading + faker.random.number({ min: 10, max: 100 })
          return {
            id: index + 1,
            meterNumber: `DL${String(index + 1).padStart(6, '0')}`,
            roomNumber: `${Math.floor((index + 1) / 10) + 1}0${(index + 1) % 10 || 10}`,
            currentReading,
            lastReading,
            usage: currentReading - lastReading,
            status: ['normal', 'fault', 'disabled'][faker.random.number(2)],
            installDate: faker.date.past().toISOString().split('T')[0]
          }
        })
      }
      this.tableData = data.list
      this.pagination.total = data.totalCount
      this.loading = false
    },
    getStatusType (status) {
      const types = {
        normal: 'success',
        fault: 'danger',
        disabled: 'warning'
      }
      return types[status] || 'info'
    },
    getStatusText (status) {
      const texts = {
        normal: '正常',
        fault: '故障',
        disabled: '停用'
      }
      return texts[status] || '未知'
    },
    handleSearch () {
      this.pagination.currentPage = 1
      this.getList()
    },
    handleReset () {
      this.searchForm = {
        meterNumber: '',
        roomNumber: '',
        status: ''
      }
      this.pagination.currentPage = 1
      this.getList()
    },
    handleAdd () {
      this.$message.info('新增电表功能开发中...')
    },
    handleEdit (row) {
      this.$message.info(`编辑电表: ${row.meterNumber}`)
    },
    handleRead (row) {
      this.$message.info(`抄表: ${row.meterNumber}`)
    },
    handleDelete (row) {
      this.$confirm(`确认删除电表 ${row.meterNumber}？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message.success('删除成功')
        this.getList()
      }).catch(() => {
        this.$message.info('已取消删除')
      })
    },
    handleSizeChange (val) {
      this.pagination.pageSize = val
      this.getList()
    },
    handleCurrentChange (val) {
      this.pagination.currentPage = val
      this.getList()
    }
  }
}
</script>

<style scoped>
.demo-form-inline .el-form-item {
  margin-bottom: 10px;
}
</style>

